<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>商品录入</title>
	<link rel="stylesheet" type="text/css" href="../lib/mui/css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="../css/base.css">
</head>
<body>
	<!-- 侧滑导航根容器 -->
	<div class="mui-off-canvas-wrap mui-draggable mui-slide-in" id="offCanvasSide">
	  	<!-- 菜单容器 -->
	 	<aside class="mui-off-canvas-right ">
	    	<div class="mui-scroll-wrapper">
	      		<div class="mui-scroll">
	        		<!-- 菜单具体展示内容 -->
	        		<ul class="mui-table-view mui-table-view-chevron mui-table-view-inverted">
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">Item 1</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">Item 2</a>
						</li>
						<li class="mui-table-view-cell">
							<a class="mui-navigate-right">Item 3</a>
						</li>
					</ul>
	      		</div>
	    	</div>
	  	</aside>

	  	<!-- 主页面容器 -->
		<div class="mui-inner-wrap">

			<!-- 主页面头部 -->
		    <header class="mui-bar mui-bar-nav scm-nav-black">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><span>返回</span></a>
				<h1 class="mui-title">商品录入</h1>
				<a id="offCanvasBtn" href="#offCanvasSide" class="mui-icon mui-action-menu mui-icon-more mui-pull-right"></a>
			</header>
							
						
			<!-- 主页面body -->
			<div class="mui-content mui-scroll-wrapper" id="muis">
				<!-- 滚动容器 -->
				<div class="mui-scroll">
					<!-- 正文 -->
					<div class="goods-edit mui-control-content mui-active" id="main">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right mui-control-item open-nav" href="#goodsName" data-toggle="#name-nav">商品名称
									<span class="pull-r">贝婴美健儿奶粉</span>
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right mui-control-item open-nav" href="#goodsImg" data-toggle="#img-nav">上传商品图片</a>
								<div class="ge-bd">
									<img src="../img/3.png" class="thumb-img">
									<img src="../img/3.png" class="thumb-img">
									<img src="../img/3.png" class="thumb-img">
									<img src="../img/3.png" class="thumb-img">
									<img src="../img/3.png" class="thumb-img">
									
								</div>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right mui-control-item open-nav" href="#goodsDsc" data-toggle="#dsc-nav">商品描述
								<span class="pull-r">贝婴美健儿奶粉产自澳大利亚，启发孩子智力</span></a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right mui-control-item open-nav" href="#goodsAttr" data-toggle="#attr-nav">商品属性
									<span class="pull-r">100ml,250ml,500ml,1000ml</span>
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right mui-control-item open-nav" href="#goodsSku" 
								data-toggle="#sku-nav">商品编码
									<span class="pull-r">ND432443</span>
								</a>
							</li>
							<li class="mui-table-view-cell ">
								<a class="mui-navigate-right mui-control-item open-nav" href="#goodsPrice" data-toggle="#price-nav">价格设置
									<span class="pull-r">￥456</span>
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right mui-control-item open-nav" href="#goodsNum" data-toggle="#num-nav">商品库存
									<span class="pull-r">1000</span>
								</a>
							</li>
							<li class="mui-table-view-cell">
								<a class="mui-navigate-right">上架</a>
								<div class="mui-switch mui-switch-mini">
								  <div class="mui-switch-handle"></div>
								</div>
							</li>
						</ul>
						<div class="scm-btn-group">
							<a href="./my_goods.html" class="mui-btn mui-btn-block darkgreen newLink">保存</a>
							<a href="./my_goods.html" class="mui-btn mui-btn-block darkgreen newLink">保存并新增</a>
						</div>
						
					</div>
					<!-- 设置商品名称面板 -->
					<div id="goodsName" class="mui-control-content">
						<div class="goods goods-info">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>商品名称</label>
								        <input type="text" class="mui-input-clear" placeholder="请输入商品名称">
								    </div>
							    </li>
							</ul>
						</div>
					</div>
					<!-- 上传商品图片面板 -->
					<div id="goodsImg" class="mui-control-content">
						<div class="goods goods-info">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<div class="mui-input-row">
								        <label>商品图片</label>
								        <input type="file" class="mui-input-clear">
								    </div>
							    </li>
							</ul>
						</div>
					</div>
					<!-- 添加商品描述面板 -->
					<div id="goodsDsc" class="mui-control-content">
						<div class="goods goods-info">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<div class="mui-input-row">
								        <label>商品描述</label>
								        <textarea id="textarea" rows="5" placeholder="请输入商品信息"></textarea>
								    </div>
							    </li>
							</ul>
						</div>
					</div>
					<!-- 设置商品属性面板 -->
					<div id="goodsAttr" class="mui-control-content">
						<div class="scm-list edit">
							<ul>
								<li class="list-item">
									<h3 class="title">商品属性1</h3>
									<div class="mui-input-row border name">
								        <input type="text" class="mui-input-clear">
								    </div>
								</li>
								<li class="list-item">
									<h3 class="title">商品属性2</h3>
									<div class="mui-input-row border name">
								        <input type="text" class="mui-input-clear">
								    </div>
								</li>
							</ul>
						</div>
					</div>
					<!-- 设置商品编码面板 -->
					<div id="goodsSku" class="mui-control-content">
						<div class="goods goods-info">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>红色，M</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品sku">
								    </div>
							    </li>
							    <li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>绿色，S</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品sku">
								    </div>
							    </li>
							    <li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>蓝色，L</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品sku">
								    </div>
							    </li>
							    <li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>紫色，S</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品sku">
								    </div>
							    </li>
							</ul>
						</div>
					</div>
					
					<!-- 设置商品价格面板 -->
					<div id="goodsPrice" class="mui-control-content">
						<div class="goods goods-info">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>红色</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品价格">
								    </div>
							    </li>
							    <li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>绿色</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品价格">
								    </div>
							    </li>
							    <li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>蓝色</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品价格">
								    </div>
							    </li>
							    <li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>紫色</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品价格">
								    </div>
							    </li>
							</ul>
						</div>
					</div>
					<!-- 设置商品库存面板 -->
					<div id="goodsNum" class="mui-control-content">
						<div class="goods goods-info">
							<ul class="mui-table-view">
								<li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>红色</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品库存">
								    </div>
							    </li>
							    <li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>黄色</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品库存">
								    </div>
							    </li>
							    <li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>蓝色</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品库存">
								    </div>
							    </li>
							    <li class="mui-table-view-cell">
									<div class="mui-input-row border">
								        <label>绿色</label>
								        <input type="text" class="mui-input-clear" placeholder="填写商品库存">
								    </div>
							    </li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			
			<!-- 遮挡层 -->
			<div class="mui-off-canvas-backdrop"></div>
			
			<!-- 底部nav -->
			<nav class="mui-bar mui-bar-tab scm-bar-green navs" id="name-nav">
				<a class="mui-tab-item mui-control-item close-nav" href="#main">
					<span class="mui-tab-label">完成</span>
				</a>
			</nav>
			<nav class="mui-bar mui-bar-tab scm-bar-green navs" id="img-nav">
				<a class="mui-tab-item mui-control-item close-nav" href="#main">
					<span class="mui-tab-label">完成</span>
				</a>
			</nav>
			<nav class="mui-bar mui-bar-tab scm-bar-green navs" id="dsc-nav">
				<a class="mui-tab-item mui-control-item close-nav" href="#main">
					<span class="mui-tab-label">完成</span>
				</a>
			</nav>
			<nav class="mui-bar mui-bar-tab navs" id="attr-nav">
				<a class="mui-tab-item frist">
					<span class="mui-icon mui-icon-plusempty"></span>
					<span class="mui-tab-label">新建属性</span>
				</a>
				<a class="mui-tab-item mui-control-item close-nav end" href="#main">
					<span class="mui-tab-label">保存</span>
				</a>
			</nav>
			<nav class="mui-bar mui-bar-tab navs" id="sku-nav">
				<a class="mui-tab-item frist">
					<span class="mui-icon mui-icon-plusempty"></span>
					<span class="mui-tab-label">自动生成编码</span>
				</a>
				<a class="mui-tab-item mui-control-item close-nav end" href="#main">
					<span class="mui-tab-label">保存</span>
				</a>
			</nav>
			<nav class="mui-bar mui-bar-tab navs" id="price-nav">
				<a class="mui-tab-item frist" href="#batch">
					<span class="mui-tab-label">批量设置价格</span>
				</a>
				<a class="mui-tab-item mui-control-item close-nav end" href="#main">
					<span class="mui-tab-label">保存</span>
				</a>
			</nav>
			<nav class="mui-bar mui-bar-tab scm-bar-green navs" id="num-nav">
				<a class="mui-tab-item mui-control-item close-nav" href="#main">
					<span class="mui-tab-label">完成</span>
				</a>
			</nav>
		</div>

	</div>	

	<div id="batch" class="mui-popover mui-popover-action mui-popover-bottom">
		<div class="scm-list">
			<ul>
				<li class="list-item">
					<h3 class="title">请填写价格</h3>
					<div class="mui-input-row border">
				        <input type="text" class="mui-input-clear">
				    </div>
				</li>
			</ul>
		</div>
		<a href="#batch" class="scm-btn-lg green close-popover">确定</a>
	</div>	
	

	<script type="text/javascript" src="../lib/mui/js/mui.min.js"></script>
	<script type="text/javascript" src="../js/base.js"></script>
	<script type="text/javascript">
		mui('#muis').scroll();
		
	</script>
</body>
</html>